<template>
    <div class="person">
        <h2>姓名:{{name}}</h2>
        <h2>年龄:{{age}}</h2>
        <h2>地址:{{ address }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<!-- <script lang="ts">
/*vue2中选项是的语法可以和vue3的setup语法共存,vue2可以读取setup中的数据,但setup不能读取旧写法中的数据*/
export default {
    name: 'Person'
}
</script> -->

<script setup lang="ts" name = 'Person'>
import {ref} from 'vue'
    let name = ref('张三')//注意:此时的数据不是响应式的
    let age = ref(18)//注意:此时的数据不是响应式的
    let tel = '13888888888'//注意:此时的数据不是响应式的
    let address = '辽宁省抚顺市'

    //方法
    function changeName() {
        name.value = 'zhang-san'
    }
    function changeAge() {
        age.value += 1
    }
    function showTel() {
        alert(tel)
    }
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 10px;
}
</style>